<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)

const data = [
  {
    "name": "绿色石化",
    "value": 2.25
  },
  {
    "name": "汽车",
    "value": 5.32
  },
  {
    "name": "高新装备",
    "value": 35.12
  },
  {
    "name": "新材料",
    "value": 4.22
  },
  {
    "name": "电子信息",
    "value": 14.72
  },
  {
    "name": "关键基础件",
    "value": 15.33
  },
  {
    "name": "智能家电",
    "value": 5.84
  },
  {
    "name": "时尚纺织服装",
    "value": 6.24
  },
  {
    "name": "生物医药",
    "value": 0.99
  },
  {
    "name": "文本服务器",
    "value": 5.38
  },
  {
    "name": "节能环保",
    "value": 4.59
  }
]

//分割数组
const splitArray = (arr, chunkSize) => {
  let result = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    result.push(arr.slice(i, i + chunkSize));
  }
  return result
}


onMounted(() => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: splitArray(data, 8).map((item, index) => {
        return {
          type: "scroll",
          orient: 'vertical',
          left: 45 + index * 30 + '%',
          align: 'left',
          top: 'middle',
          data: item,
          textStyle: {
            color: '#8C8C8C'
          },
        }
      }),
      series: [
        {
          type: 'pie',
          center: ['25%', '50%'],
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };
    Echarts.setOption(option);

    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
